c/views/dashboard/calender.vue
<template>
  <div class="cal">
    <!-- =={{ currentYear }} -->
    <el-select v-model="currentYear" placeholder="请选择" @change="changeItem">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-select v-model="currentMonth" placeholder="请选择" @change="changeItem">
      <el-option
        v-for="item in 12"
        :key="item.value"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-calendar v-model="value">
      <!-- <template #dateCell="{ data }"> ===={{ data.type }}</template> -->
      <template v-slot:dateCell="{ date }">
        <!-- {{ isDate(date) }} -->
        <span class="today">{{ isDate(date) }}</span>
        <span v-if="isWeek(date)" class="week">休</span>
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      value: new Date(),
      options: [],
      currentYear: new Date().getFullYear(), // 2021
      currentMonth: new Date().getMonth() + 1 // 2021
    }
  },
  computed: {},
  created() {
    // console.log(Array(11), 9)
    // var arr = [1, 2, 3, 4, 2, 3, 1]
    // console.log([...new Set(arr)], 7)
    // console.log(Array.from(new Set(arr)), 8)
    Array.from(Array(11), (item, i) => {
      // console.log(item,i, 5)
      console.log(this.currentYear + i - 5)
      this.options.push(this.currentYear + i - 5) // [2016,2017,...,2026]
    })
  },
  methods: {
    isDate(d) {
      return d.getDate() //  获取当天的日期
    },
    isWeek(d) {
      var day = d.getDay() //  获取的是星期
      if (day === 0 || day === 6) {
        return true
      } else {
        return false
      }
    },
    changeItem() {
      this.value = new Date(`${this.currentYear}-${this.currentMonth}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.week {
  background-color: #f8794d;
  border-radius: 50%;
  font-size: 12px;
  padding: 3px;
  color: #fff;
  float: right;
}
.cal {
  ::v-deep .el-calendar__header {
    display: none;
  }
}
.is-today .today {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: red;
  border-radius: 50%;
  font-size: 12px;
  padding: 3px;
  color: #fff;
}
</style>
